import React, { Component } from 'react';
import { Modal, Button, Form, Select, Input, Row, Col } from "antd";
import styles from './classificationForm.less';
import { connect } from 'dva';
import './style.css';

const { Option } = Select;
const FormItem = Form.Item;

const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 6 },
    },
    wrapperCol: {  
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };

@Form.create()
@connect(({ drop, list }) => ({
    drop,
    selectDrop: list.selectDrop.data
  }))
class ClassificationForm extends Component {

    constructor(props) {
        super(props);
        const { selectDrop } = props;
        this.state = {
            value: "",
            aliasName: "",
            skuCode: "",
            text: '',
            fullName: ''
        }
    }

    selectChange = (value) => {
        // 下拉触发改变值
        this.setState({
            value: value,
            aliasName: "",
            skuCode: ""
        });
    }

    // 初始化加载
    init = () => {
        
    }

    // 保存
    saveTemplate = (values) => {
        const { dispatch } = this.props;
        dispatch({
            type: 'drop/queryOne',
            payload: {
              ...this.state
            },
        });
    }

    render() {
        const {
            isShowModel,
            modelTitle,
            handleCancel,
            isLoading,
            props,
            selectDrop
        } = this.props;
        const { getFieldDecorator } = props.form;
        // 获取下拉列表值
        const data = props.list ? 
                     (props.list.selectDrop ? 
                        (props.list.selectDrop.data ? props.list.selectDrop.data : [])
                        : 
                        [])
                     : 
                     [];
        const aliasName = this.state.aliasName;
        const skuCode = this.state.skuCode;
        return (
            <Modal
                className="littleModel"
                visible={isShowModel}
                title={modelTitle}
                onCancel={handleCancel}
                footer={[
                    <Button key="back" onClick={handleCancel}>取消</Button>,
                    <Button key="submit" htmlType="submit" type="primary" loading={isLoading} onClick={this.saveTemplate}>
                        保存
                    </Button>,
                ]}
                >
                    <Row gutter={24}>
                        <Col span={24}>
                            <Form>
                                <FormItem
                                    {...formItemLayout}
                                    label="名称"
                                    >   
                                        {getFieldDecorator('skuValue', {
                                            initialValue: data[0] ? data[0].id : "",
                                            rules: [{ required: true, message: '名称' }],
                                        })(
                                            <Select name="skuValue" id="skuValue" onChange={this.selectChange}>
                                                {
                                                   data.map(function(item, index) {
                                                        return (
                                                            <Option value={item.id} key={index}> {
                                                                item.text
                                                            } </Option>
                                                        );
                                                   })
                                                }
                                            </Select>
                                        )}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label="别名/俗称"
                                    >
                                    {getFieldDecorator('aliasName', {
                                         initialValue: aliasName ? aliasName : data[0] ? data[0].aliasName : "",
                                        rules: [{ required: false, message: '别名/俗称' }],
                                    })(
                                        <Input disabled/>
                                    )}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label="分类编号"
                                    >
                                    {getFieldDecorator('skuCode', {
                                        initialValue: skuCode ? skuCode : data[0] ? data[0].skuCode : "",
                                        rules: [{ required: false, message: '分类编号'}],
                                    })(
                                        <Input disabled/>
                                    )}
                                </FormItem>
                            </Form>
                        </Col>
                        <Col span={24} style={{ display: 'flex', alignItems: 'center' }}>
                            <Button type="primary">新增分类</Button>
                        </Col>
                    </Row>
            </Modal>
        );
    }

    // 加载完成之后
    componentDidMount() {
        // 在这里初始化数据
        this.setState({
            value: this.props.selectDrop ? this.props.selectDrop[0].id : "",
            aliasName: this.props.selectDrop ? this.props.selectDrop[0].aliasName : "",
            skuCode: this.props.selectDrop ? this.props.selectDrop[0].skuCode : "",
            text: this.props.selectDrop ? this.props.selectDrop[0].text : "",
            fullName: this.props.selectDrop ? this.props.selectDrop[0].fullName : "",
        });
    }
}

export default ClassificationForm;